<script setup>
import { ref } from 'vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { artUpdateStudentStartSevrvice } from '@/api/proofsta'

//表单校验
const fromRef = ref(null)
//默认数据
const defaultInfo = {
  userId: '',
  openId: '',
  proofId: '',
  userPhoto: '',
  certificationInfo: null,
  schoolName: '',
  major: '',
  userProofStart: '',
}
const getDefaultModel = () => ({
  userId: '',
  openId: '',
  proofId: '',
  userPhoto: '',
  certificationInfo: null,
  schoolName: '',
  major: '',
  userProofStart: '',
})

// 图片地址对象
const imageUrl = ref('')
//准备数据
const fromModel = ref({
  ...getDefaultModel(),
})
const tite = ref('')
//抽屉显示隐藏
const visibleDrawer = ref(false)
const quillEditorkey = ref(null)
//接受父组件的参数 如果有数据表示修改,没有数据表示添加
const open = async (row) => {
  quillEditorkey.value = Date.now()
  //清空数据
  imageUrl.value = ''
  fromModel.value = getDefaultModel()
  console.log(row)

  visibleDrawer.value = true //显示抽屉
  Editwenzhang(row)
  // 表示添加  默认空数据
  tite.value = '学生审核'
  fromModel.value = { ...defaultInfo }
  fromRef.value?.resetFields()
}

//编辑文章将一行的数据赋值给对应的参数
const Editwenzhang = async (row) => {
  console.log(row.row)
  // 修改row.row中的userPhoto
  // row.row.userPhoto = + row.row.userPhoto
  imageUrl.value =
    'https://kuaizu-img-file.oss-cn-hangzhou.aliyuncs.com/kuaizu_text_img/' +
    row.row.userPhoto
  await nextTick()
  fromModel.value = {
    ...row.row,
    content: row.content || '', // 确保 content 字段存在
  }
  console.log(fromModel)
}

defineExpose({
  open,
})
const emit = defineEmits(['getList'])
//提交数据
const onaddList = async (state) => {
  //设置状态
  fromModel.value.userProofStart = state
  // 修改数据
  try {
    const res = await artUpdateStudentStartSevrvice(fromModel.value)
    console.log(res)
    ElMessage.success('审核成功')
  } catch (e) {
    ElMessage.error(e.message)
    console.error(e)
  }
  emit('getList', 'add')
  // 关闭抽屉
  visibleDrawer.value = false
}
</script>

<template>
  <el-drawer v-model="visibleDrawer" :title="tite" direction="rtl" size="50%">
    <el-form :rules="rules" ref="fromRef" :model="fromModel">
      <el-form-item label="学生昵称" prop="nickName">
        <!-- //设置文本框的值为对应的学生昵称 -->
        <el-input v-model="fromModel.nickName" disabled></el-input>
      </el-form-item>
      <el-form-item label="专业名称" prop="major">
        <!-- <channel-select v-model="fromModel.categoryId"></channel-select> -->
        <el-input v-model="fromModel.major" disabled></el-input>
      </el-form-item>
      <el-form-item label="学生证信息" prop="coverImg">
        <img :src="imageUrl" class="avatar" />
      </el-form-item>
      <el-form-item label="备注信息" prop="major">
        <!-- <channel-select v-model="fromModel.categoryId"></channel-select> -->
        <el-input v-model="fromModel.certificationInfo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onaddList(2)">审核拒绝</el-button>
        <el-button type="info" @click="onaddList(1)">审核通过</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  // 确保编辑器有最小高度
  min-height: 200px;
  // height: 300px;
  // margin: 20px;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
